<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_small'"
      :append-to-body="true"
      :title="btn.Setting"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormSettingVisible"
      @closed="closeDialog"
    >
      <div>
        <el-form
          ref="formData"
          :model="form"
          :rules="rules"
          label-width="130px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="dataList.CheckOrNot"
            style="width: 100%"
            prop="isVerification"
          >
            <el-select
              v-model="form.isVerification"
              :placeholder="dataList.Placeholder"
              @change="isVerificationChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.isVerification == '1'"
            :label="dataList.ScheduledInspectionTime"
            style="width: 100%"
            prop="verificationPlanDate"
          >
            <el-date-picker
              v-model="form.verificationPlanDate"
              type="date"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            v-if="form.isVerification == '1'"
            :label="dataList.Week"
            prop="cycle"
          >
            <el-input
              v-model="form.cycle"
              style="width: 50%"
              oninput="value=value.replace(/[^\d]/g,'')"
              @change="cycleChange"
            ></el-input>
            <el-select
              ref="options"
              v-model="form.cycleName"
              style="width: 50%"
              :placeholder="dataList.Placeholder"
            >
              <el-option
                v-for="item in cycleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.isVerification == '1'"
            :label="dataList.Inspector"
            prop="verificationPerson"
          >
            <UserDropDownList
              :value="form.verificationPerson"
              @getData="borrowPersonChange"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="closeDialog">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UserDropDownList from "../../../components/UserDropDownList.vue";
import { YesAndNo, periodUnit } from "../../../utils/const";
export default {
  name: "DeviceVerificationPlanSettingDialog",
  components: { UserDropDownList },
  props: {
    dialogFormSettingVisible: {
      type: Boolean,
      default: false,
    },
    deviceVerificationPlanInfoDto: {
      type: Object,
      default: () => {},
    },
    deviceDto: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      returnObjct: true,
      options: YesAndNo,
      cycleOptions: periodUnit,
      innerDialogFormVisible: false,
      form: {
        isVerification: 1,
        verificationPlanDate: null,
        cycle: "",
        cycleName: "年",
        unit: 1,
        verificationPerson: "",
        verificationPersonName: "",
      },
      // 限制日期
      pickerOptions: {
        // 限制日期
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      rules: {
        verificationPerson: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        cycle: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        verificationPlanDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        isVerification: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    if (this.deviceVerificationPlanInfoDto !== undefined) {
      // 设置核查人，默认为负责人，设置了核查人则为核查人
      var data = JSON.parse(JSON.stringify(this.deviceVerificationPlanInfoDto));
      this.form = data;
      if (this.deviceDto !== undefined) {
        if (this.form.verificationPerson <= 0) {
          this.form.verificationPerson = this.deviceDto.personResponsibleId;
          this.form.verificationPersonName =
            this.deviceDto.personResponsibleName;
        }
      }

      if (
        this.form.verificationPerson === 0 ||
        this.form.verificationPerson === "0"
      ) {
        this.form.verificationPerson = null;
      }
      if (this.form.cycleName === "") {
        this.form.cycleName = this.$i18n.locale === "en" ? "Year" : "年";
      }

      this.form.isVerification =
        this.form.isVerification === undefined ||
        this.form.isVerification === ""
          ? 1
          : Number(this.form.isVerification);
    }
  },
  methods: {
    cycleChange(val) {
      this.form.cycle = val;
    },
    isVerificationChange() {
      if (this.form.isVerification === 0) {
        this.form.cycleName = null;
        this.form.cycle = null;
        this.form.verificationPlanDate = null;
        this.form.verificationPerson = null;
        this.form.isCalibrationName = this.$t("ModuleDevice.Device.Deny");
      }
    },
    borrowPersonChange(val) {
      this.form.verificationPerson = val.id;
      this.form.verificationPersonName = val.name;
    },

    cancel() {
      this.$emit("update:dialogFormSettingVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
    onSubmit() {
      if (this.form.isVerification === 0) {
        this.form.verificationPlanDate = "";
        this.form.cycle = "";
        this.form.cycleName = "";
        this.form.verificationPersonName = "";
        this.form.verificationPerson = 0;
        this.$emit("settingDialogClose", this.form);
        this.cancel();
      } else {
        // 周期单位
        this.form.isVerificationName = this.options.find(
          (item) => item.value === this.form.isVerification
        ).label;
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.$emit("settingDialogClose", this.form);
            this.cancel();
          }
        });
      }
    },
  },
};
</script>
